
<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-ui-slider-type type-per ddp-slider-bg">
  <!-- Input Range -->
  <div class="ddp-range-num">
    <div class="ddp-data-num ddp-min">
      <span class="ddp-label">Minimum</span>
      <component-input
        [compType]="'apply'"
        [value]="filter.min"
        [valueType]="'number'"
        (changeValue)="setMinValue($event)"></component-input>
    </div>
    <div class="ddp-data-num ddp-max">
      <span class="ddp-label">Maximum</span>
      <component-input
        [compType]="'apply'"
        [value]="filter.max"
        [valueType]="'number'"
        (changeValue)="setMaxValue($event)"></component-input>
    </div>
  </div>
  <!-- // Input Range -->

  <input #rangeSlider type="text" value="" name="range" />

  <!-- data range -->
  <div class="ddp-data-range">
    <span class="ddp-label-range">Available input range</span>
    <span class="ddp-view-range">
      <span>{{filter.minValue}} ~</span>
      <span>{{filter.maxValue}}</span>
    </span>
  </div>
  <!-- // data range -->
</div>
